<template>
  <div style="position: relative;width: 100%;height: 100%; ">
    <div class="cjy-moldeTitle" style="
    white-space: nowrap;
    word-break: break-all;">
      选择赠品
    </div>

    <div style="height:20rem;padding:2.2rem  0 3rem 0 ;width: 100% ;position: relative;overflow: hidden">
      <vertical-scroll :lengths="3" ref="translateMain">
        <div style="width: 100%">
          <ul class="cjy-selectLadderMelue">

            <li class="cjy-selectLadderList green-style"
                style="border-bottom: 1px solid lightgrey;border-top: 1px solid lightgrey">
              <label
                style="display: inline-block;width: 100%;overflow: hidden;text-overflow: ellipsis;padding: 0.1rem;height: 2rem">
              <span style="position: relative;padding-right: 0.5rem">
              <input style="width: 1rem;height: 1rem;display: inline-block; transform: translatey(50%)"
                     type="radio"
                     name="selectLadderList"
                     :value="-1"
                     v-model="activeIndex"
                     class="aui-checkbox">
              </span>
                不使用优惠
              </label>
            </li>

            <showBox v-for=" (item, index) in ladderList"
                     :giftDefault="item.giftVO">
              <li class="cjy-selectLadderList green-style" style="position: absolute ;width: 100%">
                <div>
                  <label style="display: inline-block;width: 60%;overflow: hidden;text-overflow: ellipsis">
                    <span style="position: relative;padding-right: 0.5rem">
                       <input style="width: 1rem;
                       height: 1rem;display: inline-block;
                       transform: translatey(50%)"
                              type="radio"
                              name="selectLadderList"
                              :value="index"
                              :disabled="item.giftVO.times <= 0"
                              v-model="activeIndex"
                              class="aui-checkbox">
                    </span>
                    {{item.giftVO.giftName}}
                  </label>
                </div>
              </li>

            </showBox>
          </ul>


        </div>

      </vertical-scroll>
    </div>

  </div>


</template>

<script>
  import VerticalScroll from '@/components/VerticalScroll'
  import showBox from '@/components/CartPullRegular'

  export default {
    data() {
      return {
        selseItem: {},
        selseNum: 1,
        activeIndex: -1,
        addMoney: 0,
      }
    },
    components: {
      VerticalScroll,
      showBox
    },

    props: {
      buyMoreLadderData: {
        type: Object,
        default: () => null
      }
    },
    methods: {
      saveSeleced(index) {
        var selseItem = this.ladderList[index]
        console.log('selseItem++++++', selseItem)
        if (!selseItem) {
          return
        }
        selseItem.selseNum = this.selseNum
        selseItem.goodsCode = this.goodsCode
        this.$store.commit('cjy/CHANGE_SELECT_BUY_MORE_LIST', selseItem)

      },
      initData() {
        var selectGiftList = this.selectGiftList
        var ladderList = this.ladderList.filter((item) => {
          return item.giftVO.times > 0
        })
        console.log(ladderList, 'ladderList----', selectGiftList)
        if (selectGiftList && ladderList) {
          // 根据保存数据 判断历史已选的位置
          this.activeIndex = ladderList.findIndex((list) => {
            var promLadderId = list.promLadderId
            // 列表是否已经被选取过 是返回true 否则返回false
            return selectGiftList.some((item) => {
                return promLadderId == item.promLadderId
              }
            )
          })
        } else {
          console.log('pfdpspf')
          this.selseItem = {}
          this.selseNum = 1
          this.activeIndex = -1
        }
      }
    },
    watch: {
      buyMoreLadderData(data) {
        this.addMoney = data.addMoney
      },
      ladderList(data) {
        this.initData()
      },
      activeIndex(data) {
        var ladderList = this.ladderList
        if (data == -1 && ladderList.length > 0) {
          var promId = ladderList[0].promId
          var goodsCode = this.goodsCode
          this.$store.commit('cjy/SPLICE_SELECT_BUY_MORE_LIST', {promId, goodsCode})
        }
        this.saveSeleced(data)
      }
    },
    computed: {
      ladderList() {
        var buyMoreLadderData = this.buyMoreLadderData
        if (buyMoreLadderData) {
          console.log('buyMoreLadderData.ladderList', buyMoreLadderData.ladderList)
          return buyMoreLadderData.ladderList
        } else {
          return []
        }

      },
      goodsCode() {
        var buyMoreLadderData = this.buyMoreLadderData
        if (buyMoreLadderData) {

          return buyMoreLadderData.goodsCode
        } else {
          return ''
        }
      },

      selectGiftList() {
        return this.$store.getters['cjy/selectGiftList']
      }
    },
    created() {
      this.initData()
    }

  }
</script>

<style scoped>
  /*.cjy-moldeTitle {*/
  /*text-align: center;*/
  /*vertical-align: middle;*/
  /*height: 2.2rem;*/
  /*line-height: 2.2rem;*/
  /*border-bottom: 1px solid gainsboro;*/
  /*position: absolute;*/
  /*width: 100%;*/
  /*z-index: 100;*/
  /*background: white;*/
  /*font-weight: 800;*/
  /*font-size: 0.75rem;*/
  /*}*/

  /*.cjy-selectGiftList {*/
  /*height: 2rem;*/
  /*line-height: 2rem;*/
  /*vertical-align: middle;*/
  /*text-align: left;*/
  /*padding: 0 0.75rem;*/
  /*border-bottom: 1px solid lightgrey;*/
  /*}*/
  /*.cjy-dec-down{*/
  /*height: 1rem;*/
  /*display: inline-block;*/
  /*width: 1rem;*/
  /*float: right;*/

  /*}*/

  .cjy-moldeTitle {
    text-align: center;
    vertical-align: middle;
    height: 2.2rem;
    border-bottom: 1px solid #F1F1F1;
    line-height: 2.2rem;
    position: absolute;
    word-break: break-all;
    white-space: nowrap;
    width: 100%;
    padding: 0 2rem;
    z-index: 100;
    background: white;
    font-weight: 800;
    font-size: 0.75rem;
  }

  .cjy-selectLadderList {
    height: 2rem;
    line-height: 2rem;
    vertical-align: middle;
    text-align: left;
    padding-left: 0.75rem;
  }

</style>
